<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
	</head>
	<body>
		
		<div class="logo">
			<img src="./img/login_img/login_03.png" alt="">
		</div>
		<form action="" method="post" class="form">	
			<div><input type="text" value="" id="username" placeholder="用户名" /></div>
			<div><input type="password" name="" id="password" value="" placeholder="请输入密码" /></div>
		<button type="submit" class="loginbtn">登录</button>
		</form>
		<div class="service">
			<a class="forget" href="#" target="_blank">忘记密码?</a>
			<a class="register" href="#" target="_blank">注册</a>
		</div>
		<div class="login-title">
			<div class="login-line"></div>
			<div class="login-word">其他登录方式</div>
			<div class="login-line"></div>
		</div>
		<div class="login-method">
			<div>
				<a href="">
					<img src="./img/login_img/login_09.png" alt="">
					<span>微信</span>
					</a>
			</div>
			<div>
				<a href="">
					<img src="./img/login_img/login_12.png" alt="">
					<span>QQ</span>
					</a>
			</div>
			<div>
				<a href="">
					<img src="./img/login_img/login_06.png" alt="">
					<span>微博</span>
					</a>
			</div>
		</div>
		<script type="text/javascript">
			// 查找元素
			var oLogin = document.querySelector('.loginbtn');
			var oUsername = document.querySelector('#username');
			var oPassword = document.querySelector('#password');
			
			
			oLogin.onclick=function(){
				// 提取表单
				var name=oUsername.value;
				var psd=oPassword.value;
				//表单验证
			// 1.创建XMLHttpRequest 对象
			var ajax= new XMLHttpRequest();
			// 2.规定请求的类型、URL 以及是否异步处理请求
			ajax.open('POST','/api/user/login',true);
			//3.将请求发送到服务器
			ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			//ajax.send('username=moz&password=123')   拼接字符串
			ajax.send('username=' + name + '&password=' + psd);
			//4.监听readystate变化
			ajax.onreadystatechange = function(){
				if(ajax.readyState==4){
					var res=JSON.parse(ajax.responseText)
					if(res.status){
						//登录成功
						alert(res.msg);
						//跳转页面
						location.assign('./index.html')
					} else{
						//登陆失败
						alert(res.msg)
					}
				}
			}
			}
		</script>
		<script>
		window.onload=function(){
			// 1.创建XMLHttpRequest 对象
			var ajax= new XMLHttpRequest();
			// 2.规定请求的类型、URL 以及是否异步处理请求
			ajax.open('GET','/api/goods/list?pageIndex=1&pageSize=4',true);
			//3.发送
			ajax.send();
		}
		</script>
	</body>
</html>
